<template>
    <div class="home_box box_1" ref="home_box">
      <div class="relative">
        <div class="header_bgi w_full h_80 lh_80 bgs_full relative">
          <div class="w_20_p h_30 absolute_center title_bgi"></div>
        </div>

        <!-- 天气 -->
        <div class="weather absolute top_0 right_30"><AmapWeather /></div>

        <!-- 菜单 -->
        <div class="w_full absolute bottom_0 left_0 flex_row_between">
          <div class="w_50_p p_5 flex_row_start ml_10">
            <!-- <div class="ph_5 sub_color cursor">首页</div> -->
            <div class="ph_5 sub_color cursor" @click="goToPage('/bigscreen/productPage')">商品信息</div>
            <div class="ph_5 sub_color ml_50 cursor" @click="goToPage('/bigscreen/orderPage')">订单信息</div>
            <div class="ph_5 sub_color ml_50 cursor" @click="goToPage('/bigscreen/siCaoShangPage')">饲草商</div>
            <div class="ph_5 sub_color ml_50 cursor" @click="goToPage('/bigscreen/siCaoShangPage')">兽医</div>
          </div>

          <div class="w_50_p p_5 mr_10">
            <div class="w_full h_27 relative flex_row_end">
              <!-- <div 
                class="w_100 text_center sub_color cursor bgc_058694 border_radius_5 color_fff"
                @click="goToPage('/demo-makido全部')">牧户示范点
              </div> -->

              <div 
                class="w_100 text_center sub_color cursor bgc_058694 border_radius_5 color_fff"
                @click="goToFarmBigscreen()">牧户示范点
              </div>

              <!-- <div 
                class="w_100 text_center sub_color cursor bgc_058694 border_radius_5 color_fff ml_10"
                @click="goToRouNiu()">肉牛产业
              </div> -->
            </div>
          </div>
        </div>
      </div>

      <!-- body -->
      <div class="w_full h_full-100 ph_10 flex_row_between">
        <!-- <div class="h_80 absolute left_center top_-10 mon_text lh_40 color_fff fs_24">
          ᠪᠠᠭᠠᠷᠢᠨ ᠪᠠᠷᠠᠭᠤᠨ ᠬᠣᠱᠢᠭᠤᠨ᠎ᠤ ᠬᠢᠵᠢᠭ᠎ᠢ ᠰᠡᠷᠭᠡᠢᠯᠡᠬᠦ ᠶᠡᠬᠡ ᠳ᠋ᠠᠢᠲ᠋ᠠ᠎ᠶᠢᠨ ᠲᠥᠪ
        </div> -->

        <!-- box1 -->
        <div class="w_25_p flex_column_between">
          <div class="w_full h_25_p p_5">
            <div class="full border_radius_10 chart_box_bgi">
              <div class="chart_title l_30 lh_30 text_center"><span @click="goToPage('/')">地区生产总值</span></div>
              <div class="w_full h_full-30">
                <dv-scroll-board :config="config1" />
              </div>
            </div>
          </div>
          
          <div class="w_full h_25_p p_5">
            <div class="full border_radius_10 chart_box_bgi">
              <dv-scroll-board :config="config2" />
            </div>
          </div>
          
          <div class="w_full h_25_p p_5">
            <div class="full border_radius_10 chart_box_bgi">
              <div class="chart_title l_30 lh_30 text_center"><span @click="goToPage('/')">农业总产值</span></div>
              <div class="w_full h_full-30">
                <zhu-zhuang-tu-x class="chart" :value="data3" />
              </div>
            </div>
          </div>
          
          <div class="w_full h_25_p p_5">
            <div class="full border_radius_10 chart_box_bgi">
              <div class="chart_title l_30 lh_30 text_center"><span @click="goToPage('/')">气象资料</span></div>
              <div class="w_full h_90_p relative">
                <div class="w_80_p h_70_p absolute_center">
                  <div class="w_full h_50_p border_b_1_s_556677 flex">
                    <div class="w_50_p h_full flex_column_center pb_20">
                      <div class="w_full text_center color_aeb5be">
                        <span class="fs_20 fw_bold">5.98 </span>  
                        <span class="fs_14 ml_5">℃</span>
                      </div>
                      <div class="w_full text_center fs_12 color_5a6779">全年平均气温</div>
                    </div>

                    <div class="w_50_p h_full flex_column_center border_l_1_s_556677 pb_20">
                      <div class="w_full text_center color_aeb5be">
                        <span class="fs_20 fw_bold">2</span>  
                        <span class="fs_14 ml_5">个</span>
                      </div> 
                      <div class="w_full text_center fs_12 color_5a6779">气象机构</div>
                    </div>
                  </div>
                  <div class="w_full h_50_p flex">
                    <div class="w_50_p h_full flex_column_center pt_10">
                      <div class="w_full text_center color_aeb5be">
                        <span class="fs_20 fw_bold">4</span>  
                        <span class="fs_14 ml_5">人</span>
                      </div> 
                      <div class="w_50_p h_full text_center fs_12 color_5a6779">技术人员</div>
                    </div>
                    <div class="w_50_p h_full flex_column_center border_l_1_s_556677 pv_10">
                      <div class="w_full text_center color_aeb5be">
                        <span class="fs_20 fw_bold">8</span>  
                        <span class="fs_14 ml_5">人</span>
                      </div> 
                      <div class="w_50_p h_full text_center fs_12 color_5a6779">固定工人</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- box2 -->
        <div class="w_50_p h_full flex_column_between">
          <div class="w_full h_75_p relative">
            <div class="absolute top_40 right_20">
              <div class="fs_13 sub_color text_right">全旗牲畜总数（头、只）</div>
              <div class="fs_30 text_right font_number num_style color_fff ls_3 mt_3">
                <!-- <animate-number from="0" :to="2256963" duration="3000" /> -->
                <CountFlop val="2256963" />
              </div>
            </div>

            <div class="absolute top_120 right_20">
              <div class="fs_13 sub_color text_right">地区生产总值（万元）</div>
              <div class="fs_30 text_right font_number num_style color_fff ls_3 mt_3">
                <!-- <animate-number from="0" :to="699179" duration="3000" /> -->
                <CountFlop val="699179" />
              </div>
            </div>


            <div class="full pt_30">
              <h-map @clickMap="clickMap" />
            </div>
            
            <!-- 高德地图 -->
            <!-- <map-com class="map" /> -->
          </div>

          <div class="chart_box w_full h_25_p flex_row_around">
            <div class="w_50_p h_full p_5">
              <div class="full border_radius_10 chart_box_bgi">
                <div class="chart_title l_30 lh_30 text_center"><span @click="goToPage('/')">农牧业机械拥有量</span></div>
                <dv-scroll-board :config="config5" style="height: calc(100% - 30px)" />
              </div>
            </div>
            
            <div class="w_50_p h_full p_5">
              <div class="full border_radius_10 chart_box_bgi">
                <div class="chart_title l_30 lh_30 text_center"><span @click="goToPage('/')">农牧业机械总动力</span></div>
                <dv-scroll-board :config="config6" style="height: calc(100% - 30px)" />
              </div>
            </div>
          </div>
        </div>

        <!-- box3 -->
        <div class="w_25_p flex_column_between">
          <div class="w_full h_25_p p_5">
            <div class="full border_radius_10 chart_box_bgi">
              <div class="chart_title l_30 lh_30 text_center cursor"><span @click="goToRouNiu()">牲畜存栏</span></div>
              <div class="w_full h_full-30">
                <zhu-zhuang-tu-x class="chart" :value="data7" />
              </div>
            </div>
          </div>
          
          <div class="w_full h_25_p p_5">
            <div class="full border_radius_10 chart_box_bgi">
              <div class="chart_title l_30 lh_30 text_center"><span @click="goToPage('')">牲畜出栏</span></div>
              <div class="w_full h_full-30">
                <zhu-zhuang-tu class="chart" :value="data8" />
              </div>
            </div>
          </div>
          
          <div class="w_full h_25_p p_5">
            <div class="full border_radius_10 chart_box_bgi">
              <div class="chart_title l_30 lh_30 text_center cursor"><span @click="goToFangYi()">防疫统计</span></div>
              <div class="w_full h_full-30">
                <dv-scroll-board :config="config10" />
              </div>
            </div>
          </div>
          
          <div class="w_full h_25_p p_5">
            <div class="full border_radius_10 chart_box_bgi">
              <div class="chart_title l_30 lh_30 text_center"><span>畜产品产量</span></div>
              <div class="w_full h_full-30">
                <zhu-zhuang-tu-x class="chart" :value="data9" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  // import CountTo from 'vue-count-to'
  import BigscreenHeader from '@/common/header/index.vue';
  import CountFlop from '@/common/countFlop/index.vue';

  import BaLinYouQiMap from '@/components/map/baLinYouQiMap.vue'
  import ZhuZhuangTu from '@/components/charts/zhu-zhuang-tu.vue';
  import ZhuZhuangTu1 from '@/components/charts/zhu-zhuang-tu1.vue';
  import XianXingTu from '@/components/charts/xian-xing-tu.vue';
  import BingTu from '@/components/charts/bing-tu.vue';
  import KongXinBingTu from '@/components/charts/kong-xin-bing-tu.vue';
  import BanBingTu from '@/components/charts/ban-bing-tu.vue';
  import ZhuZhuangTuX from '@/components/charts/zhu-zhuang-tu-x.vue';
  import LeiDaTu from '@/components/charts/lei-da-tu.vue';

  import MapCom from '@/components/map/home-map.vue';
  import AmapWeather from '@/components/weather/AmapWeather.vue';
  import HMap from '@/components/HMap/index.vue'

  import { getTownList } from '@/config/api.js'

  export default {
    name: 'Home',
    components: {
      CountFlop,
      BigscreenHeader,
      BaLinYouQiMap,
      ZhuZhuangTu,
      ZhuZhuangTu1,
      XianXingTu,
      BingTu,
      KongXinBingTu,
      BanBingTu,
      ZhuZhuangTuX,
      LeiDaTu,
      MapCom,
      AmapWeather,
      HMap
    },
    data() {
      return {
        data1: {},
        data3: {},
        data4: {},
        data5: {},
        data6: {},
        data7: {},
        data8: {},
        data9: {},

        townList: [],

        config1: {
          header: ['行业', '值（万元）'],
          headerBGC: "#00142f",
          oddRowBGC: "#00142f",
          evenRowBGC: "#041d37",
          rowNum: 4,
          waitTime: 3000,
          align: ['left', 'right'],
          data: [
            ["农林牧渔业","699179"],
            ["工业",94563],
            ["建筑业",76417],
            ["批发零售业",47521],
            ["交通运输业",28546],
            ["住宿餐饮业",10163],
            ["金融业",20575],
            ["房地产业",57351],
            ["第一产业",183356],
            ["第二产业",170980],
            ["第三产业",344843],
          ]
        },
        config2: {
          header: ['种植物', '种植面积（亩）', '总产量（吨）'],
          headerBGC: "#0f263e",
          oddRowBGC: "#041d37",
          evenRowBGC: "#00142f",
          rowNum: 5,
          waitTime: 3000,
          align: ['left', 'center', 'right'],
          data: [
            ["粳稻","16165", "9173"],
            ["硬粒小麦","6705", "1363"],
            ["玉米","917865", "302993"],
            ["谷子","123499", "30522"],
            ["高粱","25148", "7221"],
            ["荞麦","34920", "4554"],
            ["其他谷物","1085", "130"],
            ["豆类合计","159196", ""],
            ["优质高效大豆","141588", "15322"],
            ["绿豆","16706", "1094"],
            ["马铃薯","11882", "3552"],
            ["花生","7960", "1990"],
            ["向日葵籽","156369", "38403"],
            ["甜菜","16698", "57824"],
            ["药材","2530", ""],
            ["蔬菜（含菜用瓜）","614", "1975"],
            ["瓜类（果用瓜）","8737", "26744"],
            ["西瓜","7035", "23487"],
            ["甜瓜","1698", "3250"],
            ["青饲料","124704", ""],
          ]
        },
        config5: {
          oddRowBGC: "#041d37",
          evenRowBGC: "#00142f",
          rowNum: 5,
          waitTime: 3000,
          align: ['left', 'right'],
          data: [
            ["大中型拖拉机", 6708],
            ["小型拖拉机", 6313],
            ["拖拉机配套农具", 19591],
            ["耕整地机械", 8916],
            ["播种机", 8295],
            ["水稻种植机械", 339],
            ["农用水泵", 9153],
            ["节水灌溉类机械", 325],
            ["收获机械", 1205],
            ["谷物联合收获机", 52],
            ["稻麦联合收割机", 370],
            ["玉米联合收割机", 5294],
            ["农产品初加工机械", 1498],
            ["农产品初加工动力机械", 82],
            ["畜牧养殖机械", 3069],
            ["农田基本建设机械", 423],
          ]
        },
        config6: {
          oddRowBGC: "#041d37",
          evenRowBGC: "#00142f",
          rowNum: 5,
          waitTime: 3000,
          align: ['left', 'right'],
          data: [
            ["柴油发动机动力", 495458],
            ["电动机动力", 93249],
            ["汽油发动机动力", 610],
            ["大中型拖拉机", 268018],
            ["小型拖拉机", 112266],
            ["水稻种植机械", 1354],
            ["收获机械", 35970],
            ["谷物联合收获机", 3722],
            ["稻麦联合收割机", 31591],
            ["玉米联合收割机", 6780],
            ["农产品初加工机械", 22],
            ["畜牧养殖机械", 25264],
            ["农田基本建设机械", 13330],
          ]
        },

        config10: {
          oddRowBGC: "#041d37",
          evenRowBGC: "#00142f",
          rowNum: 5,
          waitTime: 3000,
          align: ['left', 'right'],
          data: [
            ['牛', '192096 头'],
            ['羊', '1986053 只'],
            ['猪', '3825 头'],
            ['禽', '17250 只'],
            ['犬', '2729 条'],
            ['马', '27037 匹'],
            ['毛驴', '3784 头'],
            ['骆驼', '3793 匹']
          ]
        }
      }
    },
    created() {
    },
    mounted () {
      this.initChart()

      this.getTownList()
    },
    destroyed() {

    },
    methods: {
      // 跳转页面 
      goToPage(val) {
        this.$router.push({
          path: val
        })
      },

      // 初始化图表
      initChart() {
        this.data3 = {
          unit: '万元',
          x: ['农业', '牧业', '林业', '渔业', '服务业'].reverse(),
          y: [145680, 133364, 10886, 2540, 6084].reverse()
        }

        this.data4 = {
          unit: '',
          data: [
            {"name": "气象机构", value: 2, "unit": '个'},
            {"name": "固定工", value: 8, "unit": '人'},
            {"name": "技术人员", value: 4, "unit": '人'},
            {"name": "全年平均气温", value: 5.98, "unit": '℃'},
            // {"name": "全年降水量", value: 300.2, "unit": '毫米'},
          ]
        }

        this.data5 = {
          unit: '件',
          data: [
            {"name": "开关", value: 960, "unit": ''},
            {"name": "监控", value: 1738, "unit": ''},
            {"name": "传送带", value: 436, "unit": ''},
            {"name": "搅拌机", value: 152, "unit": ''},
            {"name": "清粪机", value: 232, "unit": ''},
            {"name": "饮水机", value: 352, "unit": ''}
          ]
        }

        this.data6 = {
          unit: '辆',
          data: [
            {"name": "拖拉机", value: 845, "unit": ''},
            {"name": "收割机", value: 439, "unit": ''},
            {"name": "打草机", value: 435, "unit": ''},
            {"name": "播种机", value: 343, "unit": ''}
          ]
        }

        this.data7 = {
          unit: '头、只、羽',
          x: ['牛', '羊', '猪', '马', '驴', '骡', '骆驼'].reverse(),
          y: [110342, 2061783, 24496, 19696, 4846, 123, 386].reverse()
        }

        this.data8 = {
          unit: '头、只、羽',
          x: ['肉牛', '肉羊', '肉猪', '肉禽', '肉马'],
          y: [70767, 1397376, 21209, 288593, 6743]
        }

        this.data9 = {
          unit: '公斤',
          yRoate: true,
          x: ['肉类', '奶类', '山羊粗毛', '山羊绒', '绵羊毛', '禽蛋'].reverse(),
          y: [35721438, 5938672, 4829, 110956, 7201783, 4025682].reverse()
        }
      },

      // 监听 点击 地图区域
      clickMap(val) {
        let townId = null
        this.townList.forEach(item => {
          if (item.name == val) {
            townId = item.id

            // 跳转到 xxx镇 页面
            this.$router.push({
              path: `/bigscreen/townPage/${townId}/${val}`
            })
          }
        })
      },

      // 获取 巴林右旗 镇 苏木
      async getTownList() {
        let blyq_countyId = '150423000000'

        let res = await getTownList(blyq_countyId)
        try {
          if (res.code == 1000) {
            this.townList = res.data
          }
        } catch(err) {
          console.log(err)
        }
      },

      // 打开防疫大屏
      goToFangYi() {
        window.open('https://fy.muu2.com')
      },

      // 打开 赤峰市 肉牛 产业 大数据平台
      goToRouNiu() {
        window.open('https://cattlecf.nmqner.com/login.php')
      },

       // 打开 智慧牧场 大屏
      goToFarmBigscreen() {
        window.open('https://dsj.dayaar.com.cn/farm-bigscreen')
      }
    }
  }
</script>



<style>
  .x { color: rgb(52, 93, 121); }

  .chart > .header { height: 30px !important; line-height: 30px !important; font-size: 18px; }
  .chart > .rows > .row-item { font-size: 18px !important; }
</style>

<style>
  @media screen and (min-width: 1400px) and (max-width: 1599px) {
    .chart > .rows > .row-item { font-size: 16px !important; }
  }

  @media screen and (min-width: 1200px) and (max-width: 1399px) {
    .chart > .rows > .row-item { font-size: 14px !important; }
  }
</style>

<style lang="less" scoped>
  .color_82fefe { color: #82fefe; }
  .fs_26_i { font-size: 26px !important; }
  .home_box {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    // background-image: url('../assets/images/bgi/img6.webp');
    background-size: 100% 100%;

    .content_box {
      width: calc(100% - 60px);
      height: calc(100% - 80px);
      padding: 0;
      /* padding: 30px; */
      // background-image: url('../assets/images/bgi/img1.png');

    }
  }

  @media screen and (min-width: 1200px) and (max-width: 1300px) {
    .title { 
      font-size: 10px !important;
    }
  }
</style>
